<template>
  <my-navigation-bar :my-style="style" title='jfaj'>告警信息</my-navigation-bar>
  <text class="navbar" :style="flag?{top: '90rpx'}:''">编辑</text>
 
 <view v-if="flag">
   <view class="content-box" :style="flag?{marginTop: '180rpx'}:''">
     <view class="time">
       2023/03
     </view>
     <scroll-view scroll-y="true" @scroll="scrollHandler">
       <view class="item-box" v-for="(item, index) in state.warnData" :key="index">
         <view class="left" @tap="scaleImg(item.imgSrc)">
           <image :src="item.imgSrc" mode=""></image>
         </view>
         <view class="right">
           <text class="date-box">{{item.date}}</text>
           <text class="desc">{{item.desc}}</text>
         </view>
       </view>
      
     </scroll-view>
   </view>
 </view>
    <view :style="{transform: bounState.coverTransform, transition: bounState.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
      <view class="content-box" :style="flag?{marginTop: '180rpx'}:''">
        <view class="time">
          2023/03
        </view>
        <scroll-view scroll-y="true" @scroll="scrollHandler">
          <view class="item-box" v-for="(item, index) in state.warnData" :key="index">
            <view class="left" @tap="scaleImg(item.imgSrc)">
              <image :src="item.imgSrc" mode=""></image>
            </view>
            <view class="right">
              <text class="date-box">{{item.date}}</text>
              <text class="desc">{{item.desc}}</text>
            </view>
          </view>
         
        </scroll-view>
      </view>
    </view>
    <view class="img-preview" @tap="scaleImg" v-show="state.isShow">
      <view class="img-box">
        <img :src="state.imgSrc" alt="">
      </view>
    </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,reactive
  } from "vue";
  //导入图片
  // import img1 from "../../static/image/warn/1.jpg";
  // import img2 from "../../static/image/warn/2.jpg";
  // import img3 from "../../static/image/warn/3.jpg";
  // import img4 from "../../static/image/warn/4.jpg";
  // import img5 from "../../static/image/warn/5.jpg";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state: bounState, moveH, startH, endH} = useBounceFunc()
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const style = {
    textAlign: 'center',
    paddingLeft: 0
  };
  const state = reactive({
    isShow: false,
    imgSrc: "",
    warnData: null,
  }) 
  state.warnData = [
    {
    imgSrc: 'https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/8a48af8f-1aa8-46b7-9afc-c5439f22e190.jpg',
    date: '2023.03.29 22:24',
    desc: '低头检测'
  },
  {
    imgSrc: 'https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/cbf4c3ee-bf5b-4c72-8117-4263a5414183.jpg',
    date: '2023.03.29 22:30',
    desc: '趴桌/侧头检测'
  },
  {
    imgSrc: 'https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/877de063-bcab-416b-8320-aa3ec67c0338.jpg',
    date: '2023.03.29 22:36',
    desc: "抬头/斜肩检测"
  },
  {
    imgSrc: 'https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/038d040f-6057-40f0-88f3-dd23c8f09511.jpg',
    date: '2023.03.29 22:40',
    desc: '抬头检测'
  },
  {
    imgSrc: 'https://mp-f7e8bd69-1984-49bf-803a-8c3a61b58a13.cdn.bspapp.com/cloudstorage/a69bb9e4-6f59-4aa1-9b03-30a2df38f1ae.jpg',
    date: '2023.03.29 22:48',
    desc: '歪头检测'
  }
  ]
  
  const scaleImg = (imgSrc) => {
    state.isShow = !state.isShow;
    state.imgSrc = imgSrc;
  }
</script>

<style lang="scss" scoped>

.navbar{
  position: fixed;
  top: 70rpx;
  left: 26rpx;
  z-index: 100;
  font-size: 37rpx;
  font-weight: 600;
  color: #999999;
}
  .content-box {
    margin-top: 150rpx;

    .time {
      background-color: #F2F2F2;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      color: #999;
      font-weight: 600;
      font-size: 36rpx;
    }

    scroll-view {
      background-color: #F2F2F2;
      height: calc(100vh - 240rpx);

      .item-box {
        // height: 210rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 15rpx 45rpx;
        margin-bottom: 20rpx;

        .left {
         width: 260rpx;
         height: 170rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
            position: relative;

            &::before {
              font-family: 'iconfont';
              content: '\e6cc';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 50rpx;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-weight: 700;

          .date-box {
            font-size: 39rpx;
          }

          .desc {
            font-size: 36rpx;
            color: #F6BB3D;
          }
        }
      }
    }
  }
  .img-preview{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    z-index: 10;
    .img-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      // width: 700rpx;
      // height: 500rpx;
      img{
        max-width: 700rpx;
      }
    }
  }
</style>
